<template>
  <view v-if="shenheStatus == 0" class="salesman">
    <view class="head">
      <view class="headBox">
        <view class="userInfo">
          <view class="user">
            <image :src="user.avatar"></image>
            <view class="info">
              <view class="info-hd">
                <text class="name">{{ user.name }}</text>
                <view
                  class="vip"
                  @click="$utils.toUrl('/shareholder/level/level')"
                  v-if="user.level_name && user.level_name != ''"
                >
                  <text class="iconfont icon-vip-fill"></text>
                  <text>{{ user.level_name }}</text>
                </view>
              </view>
              <view class="info-bd" v-if="user.district">
                <text>{{ getText(user.agent_type) }}:</text>
                <text>{{ user.district }}</text>
              </view>
            </view>
          </view>
          <view class="code" @click="onClickQrcode">
            <text class="iconfont icon-QRcode"></text>
            <text>{{ $t("title.shareQrcode") }}</text>
            <text class="iconfont icon-arrow-right more"></text>
          </view>
        </view>

        <view class="withdrow">
          <view class="item">
            <view class="tit">{{ shareHolderAliasName }}累计佣金(元)</view>
            <view class="price">{{ user.total_price || 0 }}</view>
          </view>
          <view class="item">
            <view class="tit">{{ shareHolderAliasName }}可提现余额(元)</view>
            <view class="price">{{ user.cash_profit || 0 }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="salesman-content">
      <view class="options m-box">
        <view class="option" @click="$utils.toUrl('/shareholder/level/level')">
          <image :src="asyncImgs.new_share_holder.icon1"></image>
          <text>{{ $t("shareholder.level") }}</text>
        </view>
        <view class="option" @click="$utils.toUrl('/shareholder/team/index')">
          <image :src="asyncImgs.new_share_holder.icon2"></image>
          <text>{{ $t("shareholder.teamList") }}</text>
        </view>
        <view class="option" @click="$utils.toUrl('/shareholder/order/list')">
          <image :src="asyncImgs.new_share_holder.icon3"></image>
          <text>{{ $t("title.order") }}</text>
        </view>
        <view
          class="option"
          @click="$utils.toUrl('/shareholder/finance/commission')"
        >
          <image :src="asyncImgs.new_share_holder.icon4"></image>
          <text>{{ $t("shareholder.cash") }}</text>
        </view>
        <view
          class="option"
          @click="$utils.toUrl('/shareholder/finance/withdraw')"
        >
          <image :src="asyncImgs.new_share_holder.icon5"></image>
          <text>{{ $t("shareholder.withList") }}</text>
        </view>
        <view
          class="option"
          @click="$utils.toUrl('/shareholder/withdraw/index')"
        >
          <image :src="asyncImgs.new_share_holder.icon6"></image>
          <text>{{ $t("shareholder.applyWith") }}</text>
        </view>
        <view class="option" @click="$utils.toUrl('/shareholder/frost/frost')">
          <image :src="asyncImgs.new_share_holder.icon7"></image>
          <text>冻结佣金</text>
        </view>
        <view
          class="option"
          @click="$utils.toUrl('/shareholder/order/holder-list')"
        >
          <image :src="asyncImgs.new_share_holder.icon8"></image>
          <text>{{ shareHolderAliasName }}分销</text>
        </view>
      </view>

      <view class="commission">
        <view
          class="commissionItem m-box"
          @click="$utils.toUrl('/shareholder/finance/commission?status=2')"
        >
          <view class="title">
            <text>{{ $t("shareholder.settlement") }}</text>
            <text>{{ $t("shareholder.cashTitle") }}</text>
          </view>
          <view class="money">
            <text>{{ user.is_send || 0 }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        <view class="bottom">
          <view
            class="commissionItem"
            @click="$utils.toUrl('/shareholder/finance/commission?status=1')"
          >
            <view class="title">
              <text>{{ $t("shareholder.noSettlement") }}</text>
              <text>{{ $t("shareholder.cashTitle") }}</text>
            </view>
            <view class="money">
              <text>{{ user.no_send || 0 }}</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
          <view
            class="commissionItem"
            @click="$utils.toUrl('/shareholder/finance/withdraw?status=2')"
          >
            <view class="title">
              <text>{{ $t("shareholder.withdrawed") }}</text>
              <text>{{ $t("shareholder.cashTitle") }}</text>
            </view>
            <view class="money">
              <text>{{ user.cash_price || 0 }}</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      user: {},
      shareHolderAliasName: ""
    };
  },

  computed: {
    getText() {
      return (type) => {
        let str;
        switch (type) {
          case 1:
            str = "省";
            break;

          case 2:
            str = "市";
            break;

          case 3:
            str = "区";
            break;

          default:
            str = "默认";

            break;
        }
        return str + "代理";
      };
    }
  },

  methods: {
    onClickQrcode() {
      this.$utils.toUrl("/shareholder/shareholder/code");
    },
    // 获取首页数据
    async getIndex() {
      const res = await this.$allrequest.shareholder.index();
      if (res.code == 0) {
        this.user = res.data;
      }
    }
  },
  async onShow() {
    let applyRes = await this.$allrequest.shareholder.applyStatus();
    if (!applyRes.code) {
      let data = applyRes.data;

      if (data.is_holder) {
        this.getIndex();
      } else {
        switch (data.is_apply_holder) {
          case 0:
            this.$utils.toUrl(
              "/shareholder/shareholder/conditions",
              "redirectTo"
            );
            break;

          case 1:
            this.$utils.toUrl("/shareholder/apply/apply", "redirectTo");
            break;

          case 2:
            this.getIndex();
            break;
        }
      }
    }
  },

  onLoad() {
    this.shareHolderAliasName = uni.getStorageSync("shareHolderAliasName");
    uni.setNavigationBarTitle({
      title: (this.shareHolderAliasName || "") + "中心"
    });
  }
};
</script>

<style lang="scss" scoped>
.salesman {
  background: #f2f2f2;
  color: #262626;
  min-height: 100vh;
}
.head {
  background: #f0250e;
  padding: 34rpx 50rpx 132rpx;
  color: #fff;
  border-radius: 0 0 24px 24px;

  .headBox {
    .userInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user {
        display: flex;
        flex: 1;
        image {
          width: 72rpx;
          height: 72rpx;
          background-color: #f2f2f2;
          border-radius: 50%;
        }
        .info {
          display: flex;
          flex-direction: column;
          margin-left: 12rpx;
          .name {
            font-size: 32rpx;
            font-weight: 600;
            margin-right: 10rpx;
          }
          .vip {
            position: relative;
            display: flex;
            align-items: center;
            height: 34rpx;
            font-weight: normal;
            font-size: 20rpx;
            padding: 0 4rpx 0 12rpx;
            background: linear-gradient(90deg, #fef3da 0%, #fee4af 100%);
            border-radius: 32px 0 0 32px;
            color: #b4722f;

            &:after {
              content: "";
              position: absolute;
              left: 100%;
              top: 0;
              width: 0;
              height: 0;
              border-top: 34rpx solid #fee4af;
              border-right: 14rpx solid transparent;
            }

            .icon-vip-fill {
              margin-right: 6rpx;
              font-size: 24rpx;
            }
          }
        }

        .info-hd {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

        .info-bd {
          font-size: 22rpx;
        }
      }
      .code {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: 600;
        .iconfont {
          font-weight: normal;
        }
        .iconfont:nth-child(1) {
          font-size: 48rpx;
        }
        .more {
          font-size: 20rpx;
        }
      }
    }

    .withdrow {
      display: flex;
      align-items: center;
      margin-top: 48rpx;

      .item {
        padding: 0 8rpx;
        width: 50%;
        box-sizing: border-box;
      }

      .tit {
        font-size: 24rpx;
      }

      .price {
        font-size: 40rpx;
        font-weight: bold;
      }
    }
  }
}

.options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20rpx;
  align-items: flex-start;
  .option {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    padding: 20rpx 0;
    image {
      margin-bottom: 8rpx;
      width: 50rpx;
      height: 50rpx;
    }
  }
}
.commission {
  margin-top: 24rpx;
  // padding: 0 30rpx;
  .commissionItem {
    width: 100%;
    padding: 28rpx;
    display: flex;
    flex-direction: column;
    border: 1px solid #f1f1f1;
    border-radius: 20rpx;
    background: #fff;

    .title {
      display: flex;
      align-items: baseline;
      text:nth-child(1) {
        font-size: 28rpx;
        font-weight: 600;
      }
      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-left: 8rpx;
      }
    }
    .money {
      margin-top: 4rpx;
      display: flex;
      align-items: center;
      text:nth-child(1) {
        font-size: 48rpx;
        font-weight: 600;
      }
      .iconfont {
        font-size: 24rpx;
        opacity: 0.8;
        margin-left: 10rpx;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    .commissionItem {
      width: 340rpx;
    }
  }
}

.salesman-content {
  position: relative;
  z-index: 3;
  margin-top: -80rpx;
  padding: 0 24rpx;
}

.m-box {
  background: #fff;
  border-radius: 20rpx;
}
</style>
